<template>
    <div class="">
        <div class="search-game p-head">
            <div class="tab">
                <div class="tab-body bg-fff">
                    <!-- 网游 -->
                    <div class="tab-panel active" id="tab-class01">
                        <div class="game2 border-bottom">
                            <form action="" method="get" target="_self">
                                <span>请选择游戏</span>
                                <input class="text-input" name="" placeholder="首字母查询" type="url" value=""
                                       v-model.trim="searchGame">
                            </form>
                        </div>
                        <div class="tab-class01">
                            <ul>
                                <li v-for="item in gameListFilter">
                                    <a @click="next(item)">
                                        <center>
                                            <img :src=item.gameImageUrl>
                                        </center>
                                        <p>{{item.name}}</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-letter fixed" :class="{'fixed-top':fixLetter}"
                             :style="{'height':letterTab+'px'}"
                             ref="tabLetter">
                            <a href="javascript:" name="hot2" :class="{'active':isHotActive}" id="hrefhot2"
                               @click="hotCheck">
                                <span class="hot-img"></span>
                            </a>
                            <a :class="{'active':letterIndex==index}" v-for="(item,index) in letterList"
                               @click="letterCheck(item,index)">{{item}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <NavigationModal></NavigationModal>
    </div>
</template>

<script type="text/ecmascript-6">
    import NavigationModal from '../common/NavigationModal.vue'
    export default {
        name: 'DlMakeMoney',
        data () {
            return {
                searchGame: '',
                gameList: [],
                letterList: [],
                listParams: {
                    pageIndex: 1,
                    pageSize: 51,
                    isLevelingEnabled: true,
                },
                gameListFilter: [],
                letterTab: '',
                scroll: '',
                toTop: '',
                fixLetter: false,
                isHotActive: true,
                letterIndex: -1,
                displayList: [],
                postData: {},
            }
        },
        components: {
            NavigationModal
        },
        watch: {
            searchGame(){
                var self = this;
                var str = self.searchGame;
                if (self.gameList) {
                    if (str) {
                        self.gameListFilter = self.gameList.filter(function (item) {
                            if (/^[a-zA-Z0-9/:;().]*$/.test(str)) {
                                return item.pyfirst.toLowerCase().indexOf(str.toLowerCase()) !== -1;
                            }
                        });
                    }
                    else {
                        self.gameListFilter = self.gameList;
                    }
                }
            },
            scroll(Val){
                if (Val > this.toTop) {
                    this.fixLetter = true
                } else {
                    this.fixLetter = false
                }
            }
        },
        mounted(){
            var self = this;
            self.$bus.emit('headerText', '我是打手，我要赚钱');
            self.$bus.emit('isShowRightHome', true);
            self.getGameList();
            self.getLetterList();
            self.letterTab = window.screen.height;
            window.addEventListener('scroll', this.menu);
            self.toTop = self.$refs.tabLetter.getBoundingClientRect().top
        },
        destroyed(){
            var self = this;
            self.$bus.emit('headerText', '');
            self.$bus.emit('isShowRightHome', false);
        },
        methods: {
            menu(){
                // this.scroll = document.body.scrollTop;
                this.scroll = this.$scrollTop();
            },
            getGameList(){
                var self = this;
                self.$http.post(self.$CONSTANTS.P30006 + 'category/searchgamelistbytype', self.listParams).then((res) => {
                    self.gameList = res.body.data;
                    self.gameListFilter = res.body.data;
                }, (res) => {
                    console.log(res)
                });
            },
            getLetterList(){
                var self = this;
                self.$http.get(self.$CONSTANTS.APICategory + 'category/getIsEnablePy', {
                    params: {
                        'isLevelingEnabled': true
                    }
                }).then((res) => {
                    self.letterList = res.body.py;
                }, (res) => {
                    console.log(res)
                });
            },
            hotCheck(){
                this.isHotActive = true;
                this.gameListFilter = this.gameList;
                this.letterIndex = -1;
            },
            letterCheck(item, index){
                this.isHotActive = false;
                this.letterIndex = index;
                this.updateDisplayListByFirst(item);
            },
            updateDisplayListByFirst: function (item) {
                let self = this;
                self.displayList = [];
                for (let i = 0; i < self.gameList.length; i++) {
                    if (self.gameList[i].pyfirst.toUpperCase() == item) {
                        self.displayList.push(self.gameList[i]);
                        self.gameListFilter = self.displayList;
                    }
                }
            },
            next(item){
                var self = this;
                self.postData.gName = item.name;
                self.postData.gameid = item.catagoryId;
                self.$router.push({name: 'DlSearchList', query: self.postData});
            }
        }
    }
</script>


<style scoped>
    .fixed-top {
        position: fixed !important;
        top: 0;
    }

    .hot-img {
        background: url(/dist/hot.png?460a6653bbd61ec576d27461e27cd155) 50% no-repeat;
        background-size: .4rem;
    }
</style>
